<template>
	<view v-if="show" class="unio2o-coupon-alert">
		<view  @click="show = false" class="bg"></view>
		<view class="alert-div" :class="show ? 'animated zoomInUp' : ''">
			<view class="box pd40">
				<view class="flex center alcenter pt20">
					<view class="line bg-w"></view>
					<view class="ml30 mr30 ft28 ftw600 text-w">新人专享福利</view>
					<view class="line bg-w"></view>
				</view>
				<view class="text-center mt30 ft14 text-w">恭喜您，您有2张新人优惠券待领取</view>
				<view class="mt30">
					<view class="coupon-item mb30 bdr16" :style="couponBg">
						<view class="pd40 flex space">
							<view class="coupon-l text-price pr30">
								<view class="text-center">
									<text class="ft14">￥</text>
									<text class="ft18 ftw600">10</text>
								</view>
								<view class="mt10 ft12">满30可用</view>
							</view>
							<view class="coupon-r pl50">
								<view class="ft16 ftw600 text-main">每满80减20元券</view>
								<view class="mt20 ft12 text-info">
									美食类通用
								</view>
							</view>
						</view>
					</view>
					
					<view class="coupon-item mb30 bdr16" :style="couponBg">
						<view class="pd40 flex space">
							<view class="coupon-l text-price pr30">
								<view class="text-center">
									<text class="ft14">￥</text>
									<text class="ft18 ftw600">10</text>
								</view>
								<view class="mt10 ft12">满30可用</view>
							</view>
							<view class="coupon-r pl50">
								<view class="ft16 ftw600 text-main">每满80减20元券</view>
								<view class="mt20 ft12 text-info">
									美食类通用
								</view>
							</view>
						</view>
					</view>
				</view>
				<button class="btn mt40">立即领取</button>
			</view>
			<view class="flex center mt20">
				<image @click="show = false" class="close" :src="''"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				show:false
			};
		},
		computed:{
			couponBg(){
				return 'background:url('+ '#FF6B6B' +') no-repeat;background-size:100% 100%;'
				
			}
		},
		created(){
			setTimeout(()=>{
				this.show = true;
			},1000);
		}
		
	}
</script>

<style>
/*弹窗用400的层级*/
.unio2o-coupon-alert{
	background: rgba(0,0,0,.3);
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 400;
	left: 0;
	top: 0;
}
.unio2o-coupon-alert .bg{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.3);
	left: 0;
	top: 0;
	z-index: 401;
}
.unio2o-coupon-alert .alert-div{
	position: fixed;
	width: 630rpx;
	left: calc(50% - 315rpx);
	top: 50%;
	z-index: 402;
	transform: translateY(-50%);
}
.unio2o-coupon-alert .box{
	width: 100%;
	height: 780rpx;
	background:linear-gradient(180deg,rgba(254,118,62,1) 0%,rgba(238,73,73,1) 100%);
	border-radius:16rpx;
}
.unio2o-coupon-alert .line{
	width: 48rpx;
	height: 2rpx;
}
.unio2o-coupon-alert .box .btn{
	height: 96rpx;
	line-height: 96rpx;
	font-size: 36rpx;
	font-weight: 600;
	color:#333333;
	background:linear-gradient(360deg,rgba(252,182,5,1) 0%,rgba(254,242,182,1) 100%);
	box-shadow:0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.08);
	border-radius: 48rpx;
}
.unio2o-coupon-alert .close{
	width: 96rpx;
	height: 96rpx;
}
.unio2o-coupon-alert .coupon-item{
	width:550rpx;
	height:168rpx;
}
.unio2o-coupon-alert .coupon-item .coupon-l{
	width: 140rpx;
}
.unio2o-coupon-alert .coupon-item .coupon-r{
	width: calc(100% - 140rpx);
}
</style> 